import React, { useEffect, useState } from 'react'
import Options from './options'
import { connect } from 'dva'
import { BorderBox1, Loading } from '@jiaminghi/data-view-react'
import echarts from 'echarts/lib/echarts'
import data from './data'
import { Select } from 'antd'
import { isEmpty } from 'lodash'
import LoadSty from '../../../utils/hooks'

const { Option } = Select

function Index({ Arrs, Lists, dispatch }) {

    let [Load, setLoad] = useState('flex')

    const InitCreateApp = (config) => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('Rtcom'))

        myChart.setOption(Options(config))
    }

    useEffect(() => {
        console.log(data)
        InitCreateApp(data)
    }, [])

    useEffect(() => {
        if (!isEmpty(Arrs)) {
            console.log("Arrs", Arrs)
            InitCreateApp(Arrs)
            setLoad('none')
        }
    }, [Arrs, Lists])

    function handleChange(value) {
        dispatch({
            type: 'rightTopPage/getArr',  //这里的example是model的命名空间，"/"后面的表示model中effect的异步方法名
            payload: value                  //这个表示要传递参数，当然这里可以是一个方法，作为回调方法
        });
    }

    return (
        <BorderBox1 style={{ height: 500, width: 500, position: 'relative' }}>
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div style={{ position: 'absolute', right: 0, top: 0, zIndex: 2, right: 30, top: 15, transition: '1s' }}>
                <Select defaultValue="18年春" allowClear={true} style={{ width: 100, fontSize: 15, background: '#bcdcff' }} onChange={handleChange}>
                    {
                        Lists.map((v, i) => {
                            return <Option value={v.nj} key={v.nj + i}>{v.nj}</Option>
                        })
                    }
                </Select>
            </div>
            <div id="Rtcom" style={{ width: 475, height: 475 }}></div>
        </BorderBox1 >
    )
}

const mapStateToProps = ({ rightTopPage, dispatch }, ownProps) => {
    return {
        Arrs: rightTopPage.arr,
        Lists: rightTopPage.njlist,
        dispatch
    }
}


const A = connect(mapStateToProps)(Index)

export default A
